import { useEffect, useState, useMemo } from "react"
import { Progress, Tooltip } from "antd"
import { CompressTask } from "@renderer/services/ipc/ipc.constant"
import $ipc from "@renderer/services/ipc/ipc.service"
import TaskStateIcon from "./TaskStateIcon"
import TaskStateText from "./TaskStateText"

type IProps = {
  task: CompressTask
}

export default function TaskItem({task}: IProps) {
  const [src, setSrc] = useState<string>("")
  useEffect(() => {
    const file = $ipc.cacheFileSet[task.id]
    if (!file) return
    var reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function () {
      setSrc(reader.result as string)
    }
  }, [])
  return (
    <div className="flex flex-row items-center text-white text-sm my-1 px-6">
      <div className="w-10 h-10 bg-contain bg-no-repeat bg-center" style={{backgroundImage: `url(${src})`}}></div>
      <div className="flex-1 mx-2">
        <p>{task.name}</p>
        <TaskStateText task={task}/>
      </div>
      <TaskStateIcon task={task}/>
    </div>
  )
}